<script src="/static/vue/vue.js"></script>
<script src="/static/vue-qrcode/vue-qrcode.js"></script>
<script>Vue.component(VueQrcode.name, VueQrcode);</script>

<div id="display-qr-code">
    <input
            type="{{ widget.type }}"
            name="{{ widget.name }}"
            {% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}
            {% include "django/forms/widgets/attrs.html" %}/>

    {% if widget.value != None %}
        <div class="row">
            <div class="col-xs-6 col-md-3">
                <br>
                <a href="#" class="thumbnail">
                    <qrcode value="{{ widget.value }}" :options="{ width: 200 }"></qrcode>
                </a>
            </div>
            ...
        </div>
    {% endif %}
</div>

<script>

    const vm = new Vue({
        el: '#display-qr-code',
        delimiters: ["{vue{", "}vue}"],
        data: function () {
            return {}
        },
    });

</script>
